<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        var map;
        apiready = function() {
            var order = api.pageParam.order;
            // console.log(JSON.stringify(order))



            map = api.require('bMap');
            map.open({
                rect: {
                    x: 0,
                    y: 0,
                    w: api.frameWidth,
                    h: api.frameHeight
                },
                zoomLevel: 16,
                showUserLocation: true,
                fixedOn: api.frameName,
                fixed: true
            }, function(ret) {
                if (ret.status) {
                    if (order.driverGeo) {

                        var map = api.require('bMap');
                        map.addAnnotations({
                            annotations: [{
                                id: 1,
                                lon: order.driverGeo.lng,
                                lat: order.driverGeo.lat,
                                icon: 'widget://images/zd.png'
                            }, {
                                id: 2,
                                lon: order.orderInfo.sender_lng,
                                lat: order.orderInfo.sender_lat,
                                icon: 'widget://images/fh4.png'
                            }, {
                                id: 3,
                                lon: order.orderInfo.consignee_lng,
                                lat: order.orderInfo.consignee_lat,
                                icon: 'widget://images/fh5.png'
                            }],
                            icon: 'widget://',
                            draggable: true
                        });

                        // map.addLine({
                        //     id: 101,
                        //     styles: {
                        //         borderColor: '#ff0000',
                        //         borderWidth: 10
                        //     },
                        //     points: [{
                        //         lon: order.driverGeo.lng,
                        //         lat: order.driverGeo.lat
                        //     }, {
                        //         lon: order.orderInfo.sender_lng,
                        //         lat: order.orderInfo.sender_lat
                        //     }]
                        // });

                        // map.addLine({
                        //     id: 102,
                        //     styles: {
                        //         borderColor: '#03a9f4',
                        //         borderWidth: 10
                        //     },
                        //     points: [{
                        //         lon: order.orderInfo.sender_lng,
                        //         lat: order.orderInfo.sender_lat
                        //     }, {
                        //         lon: order.orderInfo.consignee_lng,
                        //         lat: order.orderInfo.consignee_lat
                        //     }]
                        // });

                        setInterval(function() {
                            app.request.post('Client/getDriverGeo', {
                                order_id: order.id
                            }, {}, function(res) {
                                // console.log(JSON.stringify(res))
                                if (res.code == 200 && res.data.lng && res.data.lat) {
                                    map.setAnnotationCoords({
                                        id: 1,
                                        lon: res.data.lng,
                                        lat: res.data.lat
                                    });

                                    // map.removeOverlay({
                                    //     ids: [101]
                                    // });
                                    //
                                    // map.addLine({
                                    //     id: 101,
                                    //     styles: {
                                    //         borderColor: '#ff0000',
                                    //         borderWidth: 10
                                    //     },
                                    //     points: [{
                                    //         lon: res.data.lng,
                                    //         lat: res.data.lat
                                    //     }, {
                                    //         lon: order.orderInfo.sender_lng,
                                    //         lat: order.orderInfo.sender_lat
                                    //     }]
                                    // });
                                }
                            });
                        }, 10000);

                    } else {
                        var map = api.require('bMap');
                        map.addAnnotations({
                            annotations: [{
                                id: 2,
                                lon: order.orderInfo.sender_lng,
                                lat: order.orderInfo.sender_lat,
                                icon: 'widget://images/fh4.png'
                            }, {
                                id: 3,
                                lon: order.orderInfo.consignee_lng,
                                lat: order.orderInfo.consignee_lat,
                                icon: 'widget://images/fh5.png'
                            }],
                            icon: 'widget://',
                            draggable: true
                        }, function(ret) {
                            if (ret) {
                                alert(ret.id);
                            }
                        });
                    }
                }
            });
        }
    </script>
</body>

</html>
